<template>
    <div class="tooltip">
        <div class="tooltip-jbxx">
            <div class="tooltip-jbxx-head">企业基本信息</div>
            <div class="tooltip-jbxx-count">
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">单位名称</div>
                    <div class="tooltip-jbxx-text">{{oView.enterprisename}}</div>
                </div>
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">统一社会信用代码</div>
                    <div class="tooltip-jbxx-text">{{oView.creditcode}}</div>
                </div>
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">排污许可证编码</div>
                    <div class="tooltip-jbxx-text">{{oView.pwxkzid}}</div>
                </div>
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">法人代表</div>
                    <div class="tooltip-jbxx-text">{{oView.legalperson}}</div>
                </div>
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">所属行业</div>
                    <div class="tooltip-jbxx-text">{{oView.tradename}}</div>
                </div>
                <div class="tooltip-jbxx-item">
                    <div class="tooltip-jbxx-title">注册地址</div>
                    <div class="tooltip-jbxx-text">{{oView.address}}</div>
                </div>
            </div>
        </div>
        <div class="tooltip-zxjc">
            <div class="tooltip-jbxx-head _margin">在线监测</div>
            <div class="tooltip-zxjc-count">
                <el-row>
                    <el-col :span="4">
                        <div class="flex-row ">
                            <div class="tooltip-zxjc-btn"
                                 :class="{'_active':sType==='fs'}"
                                 @click="fBtnClick('btn','fs')">废水</div>
                            <div class="tooltip-zxjc-btn"
                                 :class="{'_active':sType==='fq'}"
                                 @click="fBtnClick('btn','fq')">废气</div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="flex-row  tooltip-align">
                            <el-col :span="6"
                                    class="tooltip-text">
                                排口：
                            </el-col>
                            <el-col :span="18">
                                <el-select v-model="sPk"
                                           popper-class="tooltip-select"
                                           placeholder="请选择">
                                    <el-option v-for="oItem in aPk"
                                               :key="oItem.dischargecode"
                                               :label="oItem.dischargename"
                                               :value="oItem.dischargecode">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="flex-row  tooltip-align">
                            <el-col :span="8"
                                    class="tooltip-text"
                                    style="padding-left:10px;">
                                时：
                            </el-col>
                            <el-col :span="16">
                                <el-select v-model="sTimeType"
                                           popper-class="tooltip-select"
                                           placeholder="">
                                    <el-option label="时"
                                               value="datetimerange">
                                    </el-option>
                                    <el-option label="日"
                                               value="daterange">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </div>
                    </el-col>
                    <el-col :span="8"
                            :offset="1">
                        <el-date-picker v-model="aJcsj"
                                        :type="sTimeType"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        :format="sTimeValue"
                                        :value-format="sTimeValue">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2"
                            :offset="1">
                        <div class="tooltip-zxjc-btn _active"
                             @click="fBtnClick('search')">搜索</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="tooltip-table">
            <div class="tooltip-table-left">
                <el-table :data="aTableList"
                          style="width: 100%">
                    <el-table-column prop="monitor"
                                     label="监测点"
                                     align="center">
                    </el-table-column>
                </el-table>
            </div>
            <div class="tooltip-table-center">
                <template v-if="bShow">
                    <wiv-film ref="film"
                              :multiple="nMultiple"
                              arrow="never"
                              :autoplay="true">
                        <template slot-scope="{data}">
                            <el-table :data="data">
                                <el-table-column :label="data[0].pollutionName"
                                                 align="center">
                                    <el-table-column prop="monValue"
                                                     label="监测值"
                                                     align="center">
                                    </el-table-column>
                                    <el-table-column prop="value"
                                                     label="标准值"
                                                     align="center">
                                    </el-table-column>
                                    <el-table-column prop="superValue"
                                                     label="超标倍数"
                                                     align="center">
                                    </el-table-column>
                                </el-table-column>
                            </el-table>

                        </template>
                    </wiv-film>
                </template>

            </div>
            <div class="tooltip-table-right">
                <el-table :data="aTableList"
                          style="width: 100%">
                    <el-table-column prop="monitortime"
                                     label="监测时间"
                                     align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import { URLS_MAP } from '@/urls.js'
    export default {
        props: {
            enterprisename: {//企业名称
                type: String
            },
            pscode: {//污染源编码
                type: String
            }
        },
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            return {
                oView: {},//页面数据
                sType: 'fq',//fs 废水 fq 废气
                aPk: [],//排口数据
                sPk: '',//排口选中
                sTimeType: 'datetimerange',//时间类型
                aJcsj: [],//时间数据
                sTimeValue: 'yyyy-MM-dd HH', //时间格式
                sArgTimeType: 0,//参数时间类型
                sUrl: 'd_getWryQyFq',//接口url
                aTableList: [],//表格数据
                nMultiple: 3,//胶片数量
                sWidth: '',//一项因子的宽度
                bShow: false,//wiv-fime 不响应multiple 计算完再渲染
            }
        },
        watch: {
            sTimeType(sVal) {
                if (sVal === 'datetimerange') {
                    this.sTimeValue = 'yyyy-MM-dd HH'
                    this.sArgTimeType = 0
                } else {
                    this.sTimeValue = 'yyyy-MM-dd'
                    this.sArgTimeType = 1
                }
                this.aJcsj = []
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.fGetViewData()
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            fBtnClick(sType, data) {
                switch (sType) {
                    case 'btn':
                        this.sType = data
                        if (this.sType === 'fq') {
                            this.aPk = this.oView.fqList
                            this.sUrl = 'd_getWryQyFq'
                        } else {
                            this.aPk = this.oView.fsList
                            this.sUrl = 'd_getWryQyFs'
                        }
                        break;
                    case 'search':
                        this.fGetTableData()
                        break;
                }
            },
            //*** 其他
            fGetTableData() {
                this.bShow = false
                this.$WIV.fRequest({
                    url: URLS_MAP[this.sUrl],
                    data: {
                        dischargecode: this.sPk,
                        type: this.sArgTimeType,
                        begin: this.aJcsj[0],
                        end: this.aJcsj[1],
                        pscode: this.pscode
                    }
                }).then(({ data: aData }) => {
                    let aYzData = []
                    this.aTableList = aData
                    if (aData[0].pollution.length >= 3) {
                        this.nMultiple = 3
                    } else {
                        this.nMultiple = aData[0].pollution.length
                    }
                    this.sWidth = parseInt(824 / this.nMultiple, 10) + 2 + 'px'
                    this.bShow = true
                    aData.forEach(oItem => {
                        oItem.pollution.forEach((oData, i) => {
                            if (!aYzData[i]) {
                                aYzData[i] = []
                            }
                            aYzData[i].push({ ...oData, nIdx: i })
                        })
                    })
                    this.$nextTick(() => {
                        this.$refs.film.fReset({
                            data: aYzData
                        });
                    })
                })
            },
            fGetViewData() {
                this.$WIV.fRequest({
                    url: URLS_MAP.d_getWryQyJc,
                    data: {
                        enterprisename: this.enterprisename,
                        pscode: this.pscode
                    }
                }).then(({ data: oData }) => {
                    this.oView = oData
                    this.aPk = oData.fqList
                    this.fGetTableData()
                })
            },
        }
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet" scoped>
    .tooltip {
        width: 100%;
        height: 450px;
        padding: 10px;
    }
    .tooltip-align {
        align-items: center;
    }
    .tooltip-text {
        color: #15bade;
    }
    .tooltip-jbxx {
        width: 100%;
        line-height: 35px;
    }
    .tooltip-jbxx-head {
        height: 35px;
        padding-left: 19px;
        font-size: 14px;
        line-height: 35px;
        font-weight: bold;
        background: #234c77;
        border: 1px solid #0e7a88;
        &._margin {
            margin-top: 5px;
        }
    }
    .tooltip-jbxx-count {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 72px;
        margin-top: 5px;
        background: #234c77;
    }
    .tooltip-jbxx-item {
        width: 33.3%;
        height: 50%;
        display: flex;
    }
    .tooltip-jbxx-title {
        width: 100px;
        font-size: 10px;
        font-weight: bold;
        color: #15bade;
        border: 1px solid #0e7a88;
        text-align: center;
    }
    .tooltip-jbxx-text {
        flex: 1;
        padding-left: 10px;
        border: 1px solid #0e7a88;
        .l_nowrap();
    }
    .tooltip-zxjc {
        width: 100%;
    }
    .tooltip-zxjc-count {
        width: 100%;
        margin-top: 5px;
    }
    .tooltip-zxjc-btn {
        width: 66px;
        height: 32px;
        border: 1px solid #0e7a88;
        background: #234c77;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        user-select: none;
        &._active {
            background: #15bade;
        }
    }

    .tooltip-table {
        display: flex;
        width: 100%;
        margin-top: 10px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .tooltip-table-left {
        width: 130px;
        height: 100%;
        /deep/.el-table tr th.el-table__cell {
            height: 84px;
            border-right: none;
        }
        /deep/.el-table tr td.el-table__cell:last-child {
            border-right: none;
        }
    }
    .tooltip-table-center {
        width: 847px;
        /deep/.el-table tr th.el-table__cell:nth-last-child(2).is-leaf {
            border-right: none;
        }
        /deep/.el-table tr th.el-table__cell {
            border: 2px solid #0e7a88;
            border-right: none;
            border-bottom: none;
        }
        /deep/.el-table tr td.el-table__cell:last-child {
            border-right: none;
        }
        /deep/.el-table tr th.el-table__cell.is-leaf {
            border-bottom: 2px solid #0e7a88;
        }
    }
    .tooltip-table-right {
        width: 114px;
        height: 100%;
        /deep/.el-table tr th.el-table__cell {
            height: 84px;
        }
    }
</style>
